@import "_function";

.container {
  .p(0, 25, 0, 25);
}
button {
  background: none;
  outline: none;
  border: none;
}

input {
  border: none;
  outline: none;
  background: none;
}

.home-page {
  .header {
    .oh;
    position: fixed;
    z-index: 99999999999999;
    .t(18);
    .l(42);
    .menu,
    .scanning,
    .search,
    .message {
      .db;
      .fl;
    }
    .menu {
      .w(55);
      .h(52);
      background: url("../img/home_01.png") no-repeat center;
      .bgs(55, 52);
      .mr(32);
    }
    .scanning {
      .w(61);
      .h(57);
      background: url("../img/home_02.png") no-repeat center;
      .bgs(61, 57);
      .mr(34);
    }
    .search-span {
      &:after {
        content: '';
        display: block;
        position: absolute;
        .h(32);
        .w(30);
        .l(490);
        .t(10);
        background-image: url('../img/home_21.png');
        .bgs(30,32);
        z-index: 1000;
      }
    }
    .search {
      position: relative;
      .w(335);
      .h(48);
      .lh(48);
      color: #8e8b8b;
      .fs(24);
      .pl(12);
      .pr(22);
      .mr(32);
      .br(22);
      background: rgba(255, 255, 255, 0.73);
      &::placeholder {
        color: #8e8b8b;
      }
    }
    .message {
      .w(61);
      .h(56);
      background: url("../img/home_03.png") no-repeat center;
      .bgs(61, 56);
    }
  }
  .banner {
    img {
      .w(750);
      .h(418);
    }
  }
  .nav {
    .pl(20);
    .pr(20);
    .mt(27);
    overflow: hidden;
    li {
      .fl;
      .ml(42);
      .mr(42);
      &:first-child {
        .ml(28);
      }
      &:last-child {
        .mr(28);
      }
      a {
        .lh(49);
        color: #898989;
        .fs(24);
        .db;
        .tc;
        img {
          .w(88);
          .h(88);
          margin: 0 auto;
          .db;
          span {
            .db;
          }
        }
      }
    }
  }
  .title {
    position: relative;
    .oh;
    .pr(20);
    .pl(20);
    .lh(73);
    &:after,
    &:before {
      content: '';
      position: absolute;
      background: #a0a0a0;
      .h(1);
      .db;
    }
    &:after {
      .b(2);
      .w(710);
      .l(20);
    }
    &:before {
      .t(0);
      width: 100%;
      .l(0);
    }

    h5 {
      .lh(73);
      .fl;
      .fs(34);
      color: #ff0000;
      .pl(10);
      position: relative;
      &:after {
        content: '';
        .w(4);
        .h(50);
        .db;
        position: absolute;
        .t(9);
        .l(0);
        background: #ff0000;
      }
    }
    .more {
      .fr;
      .fs(24);
      color: #464646;
      .db;
      .lh(73);
    }
  }
  .new {
    .pr(5);
    .pl(5);
    .pb(20);
    overflow: hidden;
    li {
      .w(240);
      .mt(22);
      .mb(5);
      .fl;
      img {
        .db;
        margin: 0 auto;
        .w(240);
        .h(259);
      }
      .introduce {
        .w(240);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        .fs(24);
        .lh(28);
        .pt(6);
        color: #464646;
      }
      &:nth-of-type(2),
      &:nth-of-type(5) {
        .ml(9);
        .mr(9);
      }
    }
  }
  .hot {
    .pr(5);
    .pl(5);
    .pb(30);
    .pt(20);
    overflow: hidden;
    li {
      .w(360);
      .fl;
      .pic {
        .w(360);
        .h(500);
        position: relative;
        img {
          .w(360);
          .h(500);
        }
        .info {
          position: absolute;
          .r(0);
          .b(0);
          .w(175);
          .h(33);
          .lh(33);
          .tc;
          .text {
            .w(77);
            .h(31);
            .lh(31);
            .fl;
            color: #464646;
            .fs(24);
            background: #fff;
            box-sizing: border-box;
            border: 1px dashed #ff0000;
            border-right: none;
          }
          .price {
            .fl;
            .w(98);
            background: #ff0000;
            color: #ffffff;
            .fs(24);
          }
        }
      }
      .introduce {
        .w(300);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        .fs(24);
        .lh(30);
        .pl(10);
        color: #464646;
      }
      &:first-child {
        .mr(18);
      }
      &:last-child {
        .mt(7);
        .pic {
          .w(740);
          .h(268);
          position: relative;
          img {
            .w(740);
            .h(268);
          }
          .info {
            position: absolute;
            .r(0);
            .b(0);
            .w(175);
            .h(33);
            .lh(33);
            .tc;
            .text {
              .w(77);
              .h(31);
              .lh(31);
              .fl;
              color: #464646;
              .fs(24);
              background: #fff;
              box-sizing: border-box;
              border: 1px dashed #ff0000;
              border-right: none;
            }
            .price {
              .fl;
              .w(98);
              background: #ff0000;
              color: #ffffff;
              .fs(24);
            }
          }
        }
        .introduce {
          .w(740);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          .fs(24);
          .lh(50);
          color: #464646;
        }
      }
    }
  }
  .special-offer {
    .mt(23);
    .pr(5);
    .pl(5);
    .mb(120);
    overflow: hidden;
    .left {
      .fl;
      li {
        background: no-repeat 2px;
        position: relative;
        .w(163);
        .pl(220);
        .h(318);
        border: 1px solid #959595;
        .mb(15);
        &:first-child {
          .bgs(250, 250);
        }
        &:last-child {
          .bgs(214, 204);
        }
        .top-right {
          .fs(26);
          color: #ffffff;
          background: #ff0000;
          position: absolute;
          right: 0;
          top: 0;
          .w(147);
          .h(38);
          .tc;
          .lh(38);
        }
        .info {
          .w(150);
          .pl(15);
          .mt(75);
          .fs(26);
          color: #000;
        }
        .price {
          .pl(15);
          .fs(26);
          .fs(24);
          .lh(110);
          color: #ff0000;
          span {
            .fs(32);
            .ti(8);
          }
        }
      }
    }
    .right {
      .fr;
      border: 1px solid #959595;
      img {
        .w(339);
        .h(560);
      }
      .info {
        .mt(10);
        .fs(26);
        color: #464646;
        .lh(35);
        span {
          display: inline-block;
          .w(110);
          .h(35);
          .lh(35);
          background: #f00;
          color: #fff;
          .mr(15);
        }
      }
      .price {
        .lh(48);
        .fs(24);
        color: #f00;
        span {
          .fs(32);
          .ti(2);
        }
      }
    }
  }
}


